<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 
        媒体查询
          媒体类型
            all         所有设备
            print       打印设备
            screen      带屏幕的设备
            speach      屏幕阅读器
          
          可以再媒体类型添加only  
            兼容低版本浏览器

        min-width   视口小于指定宽度生效
        max-width   视口大于指定宽度生效

        x >= 1200px  (lg 大屏pc)           width = 1170px  （1140 + 槽宽）
        992px =< x < 1200px (md 中屏pc)    width = 970px  （940 + 槽宽）
        768px =< x < 992px  (sm 平板)      width = 750px  （730 + 槽宽）
        x < 768px (xs 移动手机)             width = auto
      */

      /* 可以使用not取反 */
      @media only screen and (min-width: 768px) and (max-width: 992px) {
        body {
          background-color: aqua;
        }
      }
    </style>
  </head>
  <body></body>
</html>
